<template>
  <div
    v-loading="loading"
    style="display: flex; flex-direction: column; flex: 1; height: 100%"
    element-loading-text="加载中..."
  >
    <div v-if="detail" class="header">
      <div class="text">
        <span class="text_title">
          <h3>{{ detail.name }}</h3>
          <el-tag v-if="detail.status == 1" type="warning">待审核</el-tag>
          <el-tag v-if="detail.status == 2">使用中</el-tag>
          <el-tag v-if="detail.status == 3" type="warning">已驳回</el-tag>
          <el-tag v-if="detail.status == 4" type="info">已禁用</el-tag>
        </span>
      </div>
      <div class="btns">
        <!-- <el-button class="btn_cancel" @click="">取消</el-button> -->
        <el-button
          v-if="detail.status == 1"
          style="width: 3.2vw"
          @click="checkFactoryType(detail.id, 2)"
          >驳回</el-button
        >
        <el-button
          v-if="detail.status == 1"
          style="width: 3.2vw"
          @click="checkFactoryType(detail.id, 1)"
          >审核</el-button
        >
        <el-button color="#007cff" style="width: 3.2vw" @click="goEditDetails(detail.id)"
          >编辑</el-button
        >
      </div>
    </div>
    <ul v-if="detail" class="list">
      <li>
        <p class="title">账户余额</p>
        <div class="xy_money">
          <div class="xy_sentent">
            <div
              ><span class="xy_mo"
                >￥{{ detail.money.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') }}</span
              >元</div
            >
            <el-button type="primary" class="btn_money" color="#007cff" @click="ChangeMoney"
              >调整余额</el-button
            >
          </div>
          <div class="xy_tip">
            <p
              ><span>{{ detail.freezeMoney.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') }}</span
              >元</p
            >
            <p>冻结金额</p>
          </div>
          <div class="xy_tip">
            <p
              ><span>{{
                detail.settlementOrderCount.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
              }}</span
              >元</p
            >
            <p>可下单金额</p>
          </div>
        </div>
      </li>
      <li>
        <p class="title">总工单</p>
        <div class="xy_money">
          <div class="xy_sentent">
            <div
              ><span class="xy_mo">{{ detail.totalOrderCount.toLocaleString() }}</span></div
            >
          </div>
          <div class="xy_tip">
            <p
              ><span>{{ detail.handlerOrderCount.toLocaleString() }}</span></p
            >
            <p>处理中</p>
          </div>
          <div class="xy_tip">
            <p
              ><span>{{ detail.waitSettlementOrderCount.toLocaleString() }}</span></p
            >
            <p>待结算</p>
          </div>
        </div>
      </li>
    </ul>
    <TablePane @loading-change="loading = $event" />
    <!-- 调整金额 -->
    <el-dialog
      class="assign-dialog"
      title="调整金额"
      :model-value="assignDialog"
      width="420px"
      top="5vh"
      :draggable="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :align-center="true"
      @close="onCancel"
    >
      <div element-loading-text="加载中...">
        <el-form
          ref="formRef"
          label-position="right"
          label-width="auto"
          :rules="rulesForm"
          :model="adjustVo"
        >
          <el-form-item label="当前余额">
            <el-input v-model.trim="detail.money" disabled class="input_w" clearable>
              <template #prepend>￥</template></el-input
            >
          </el-form-item>
          <el-form-item label="调整方式" prop="adjustMode">
            <el-radio-group v-model="adjustVo.adjustMode">
              <el-radio :value="1">增加</el-radio>
              <el-radio :value="2">减少</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="调整额度" prop="adjustMoney">
            <el-input
              v-model.trim="adjustVo.adjustMoney"
              class="input_w"
              placeholder="请输入额度"
              clearable
            >
              <template #prepend>￥</template></el-input
            >
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model.trim="adjustVo.remark"
              class="input_w"
              type="textarea"
              clearable
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button color="#007cff" style="width: 3.2vw" @click="onSave()">保存</el-button>
        <el-button style="width: 3.2vw" @click="onCancel"> 取消 </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRoute, useRouter } from 'vue-router'
  import TablePane from './TablePane.vue'
  import { getFactoryDetail, checkFactory, saveFactoryAdjustMoney } from '../../../api/merchant'
  const router = useRouter()
  const route = useRoute()
  const detail: any = ref(null) //详情
  const loading = ref(false)
  const assignDialog = ref(false)
  const formRef = ref()
  const adjustVo = ref({
    adjustMode: 1, //	调整方式：1-增加，2-减少,示例值(1)
    adjustMoney: 0, //调整金额
    remark: '', //	备注
  })
  const rulesForm = ref({
    adjustMode: [{ required: true, message: '调整方式', trigger: ['blur', 'change'] }],
    adjustMoney: [{ required: true, message: '调整金额', trigger: ['blur', 'change'] }],
    remindMode: [{ required: true, message: '提醒方式', trigger: ['blur', 'change'] }],
  })
  // 取消弹窗
  const onCancel = () => {
    assignDialog.value = false
  }
  // 保存金额调整
  const onSave = () => {
    if (!formRef.value) return
    formRef.value.validate((valid) => {
      if (valid) {
        saveFactoryAdjustMoney(adjustVo.value, route.params.id).then((res) => {
          if (res) {
            if (res.data.success) {
              assignDialog.value = false
              getNetworkDetail()
            }
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: res.data.success ? 'success' : 'error',
              duration: 3000,
            })
          }
        })
      }
    })
  }
  //
  const ChangeMoney = () => {
    assignDialog.value = true
  }
  // 获取详情
  const getNetworkDetail = async () => {
    if (!route.params.id) return
    loading.value = true
    await getFactoryDetail(route.params.id).then((res) => {
      if (res.data.success) {
        detail.value = res.data.data.row
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 3000,
        })
      }
      loading.value = false
    })
  }
  // 审核商家
  async function checkFactoryType(id: string, type) {
    ElMessageBox({
      title: '提示',
      message: type == 1 ? `确认审核通过?` : '确认驳回？',
      showCancelButton: true,
      closeOnClickModal: false,
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    })
      .then(async () => {
        loading.value = true

        await checkFactory(id, type).then((res) => {
          if (res.data.success) {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'success',
            })
            getNetworkDetail()
          } else {
            ElMessage({
              showClose: true,
              message: res.data.message,
              type: 'error',
            })
          }
          loading.value = false
        })
      })
      .catch()
  }
  const goEditDetails = (id: string) => {
    router.push('/merchant/newdetails/' + id)
  }
  onMounted(async () => {
    await getNetworkDetail()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
